<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

defineProps({
  orgImage: String,
  imgUrl: String
})

const instance = getCurrentInstance()

// 对比效果
const leftA = ref('')
const rightLimit = ref(0)

/**
 * 对比拖动事件
 * @param {e} 事件

 */
const ballMoveEvent = (e) => {

  let left = e.touches[0].pageX
  if (left < 0) {
    left = 0;
  }
  if (left >= rightLimit.value) {
    left = rightLimit.value;
  }
  leftA.value = left
}

onMounted(() => {
  uni.createSelectorQuery().in(instance).select('.image-box').boundingClientRect(rect => {
    rightLimit.value = rect.width
  }).exec()
})
</script>

<template>
  <div class="image-box">
    <div class="repair-container">
      <image mode="aspectFit" class="repair-img" :style="{ width: `${rightLimit}px` }" :src="imgUrl" />
    </div>

    <div class="repair-container repair-container-new" :style="`width:${leftA}px`">
      <image mode="aspectFit" class="repair-img" :style="{ width: `${rightLimit}px` }" :src="orgImage" />
    </div>

    <div class="drag-container" :style="`left:${leftA}px`">
      <div class="drag-line" @touchmove="ballMoveEvent"></div>
      <div @touchmove="ballMoveEvent" class="icon-drag">
        <div>原图</div>
        <div>现图</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.image-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .repair-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .repair-img {
    /* 盒子的宽度 */
    // width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }

  .repair-container-new {
    width: 50%;
    overflow: hidden;
  }



  .drag-container {
    position: absolute;
    left: 50%;
    height: 100%;
  }


  .drag-line {
    width: 4rpx;
    height: calc(100% - 56rpx);
    position: absolute;
    left: 0;
    background-color: #fff;
  }

  .icon-drag {
    width: 200rpx;
    height: 56rpx;
    position: absolute;
    bottom: 0;
    left: -100rpx;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #FFF;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>